<template>
  <base-page-view class-name="packets-container">
    <view class="packets-tab">
      <view v-for="(tab,index) in tabTit" :key="index" class="tab-item" :class="{active:active==index}" @click="toggle(index)">
        {{ tab }}
        <view v-if="active===index" class="borderBottom">
        </view>
      </view>
    </view>
    <view v-if="active===0" class="details" @click="$navigateTo('/pagesMine/my-red-packets/details')">明细</view>
    <view v-if="active===0" class="list_view">
      <view class="couponList">
        <view v-for="(item,index) in list" :key="index" class="couponItem" @click.stop="_toGoodsDetail(item)">
          <view class="descripe">
            <view class="left">
              <view class="price">
                <span class="price_small">¥</span>
                <span class="price_bold">{{ item.price }}</span>
                <view v-if="item.reward_type === 4 && item.coupon_b_o" class="left_tit">{{ '满' + item.coupon_b_o.standardPrice + '元可用' }}</view>
                <view v-else class="left_tit">{{ item.title }}</view>
              </view>
              <view v-if="item.start_date" class="timeView">
                截止 {{ _formatDate(new Date(item.end_time * 1000), 'yyyy-MM-dd HH:mm:ss') }} 之前有效
              </view>
            </view>
            <view v-if="item.coupon_link_type !== 'NONE'" class="right">
              <view v-if="item.coupon_state === 0" class="receive">
                <span>{{ '去使用' }}</span>
              </view>
            </view>
          </view>
          <view class="coupnStateBox">
            <span v-if="item.reward_type === 4 && item.coupon_b_o">{{ item.coupon_b_o.rule }}</span>
          </view>
        </view>
      </view>
      <view v-if="list.length<1" class="empty_view">
        <b-image src="/static/images/empty/empty_coupon.png" class="img" :is-asset="true" />
        <view class="tit">暂无奖励~</view>
        <view class="tit titC">明天来签到领奖励~</view>
      </view>
      <view v-if="nomore" class="no-tip" @click="$navigateTo('/pagesMine/my-red-packets/unuseReward')">查看失效奖励 ></view>
    </view>

    <view v-if="active===1" class="list_view">
      <view class="couponList">
        <view v-for="(item,index) in packetList" :key="index" class="couponItem">
          <view class="descripe">
            <view class="left">
              <view class="price">
                <span class="price_small">¥</span>
                <span class="price_bold">{{ item.price }}</span>
                <view v-if="item.reward_type === 4 && item.coupon_b_o" class="left_tit">{{ '满' + item.coupon_b_o.standardPrice + '元可用' }}</view>
                <view v-else class="left_tit">{{ '现金红包' }}</view>
              </view>
            </view>
            <view class="right">
              <view class="packet_receive">
                <span>可用</span>
              </view>
            </view>
          </view>
          <view class="readPacketcoupnStateBox">
            <view @click="showRule(item)">
              <span>使用规则:</span>
              <span>
                <image class="ruleImg" :src="item.show ? require('@/static/images/mine/arror_up.png') : require('@/static/images/mine/arror_down.png')" />
              </span>
            </view>
            <view class="timeRange">
              {{ _formatDate(item.useStartTimeOfMillisecond,'yyyy-MM-dd HH:mm:ss') }} - {{ _formatDate(item.useStopTimeOfMillisecond,'yyyy-MM-dd HH:mm:ss') }}
            </view>
          </view>
          <view v-show="item.show" class="ruleText">
            {{ item.rule }}
          </view>
        </view>
      </view>
      <view v-if="packetList.length<1" class="empty_view">
        <b-image src="/static/images/empty/empty_coupon.png" class="img" :is-asset="true" />
        <view class="tit">暂无红包~</view>
        <view class="tit titC">再接再励继续加油哦~</view>
      </view>
      <view v-if="nomorePacket" class="no-tip" @click="$navigateTo('/pagesMine/my-red-packets/unusePackets')">查看失效红包 ></view>
    </view>
  </base-page-view>
</template>
<script>
import { formatDate } from '@/utils/tools'
import { toGoods, h5NavigateTo } from '@/utils/navigateTo'
import './index.scss'
export default {
  components: {
  },
  data() {
    return {
      page_need_login: true,
      tabTit: ['我的奖励(0)', '我的红包(0)'],
      active: 0,
      page_no: 1,
      pageIndex: 1,
      list: [],
      packetList: [],
      nomore: false,
      nomorePacket: false
    }
  },
  onPullDownRefresh() {
    if (this.active === 0) {
      this.page_no = 1
      this.list = []
      this.nomore = false
      this.getList()
    } else {
      this.pageIndex = 1
      this.packetList = []
      this.nomorePacket = false
      this.getPacketList()
    }
  },
  onReachBottom() {
    if (this.active === 0) {
      if (this.nomore) return
      this.page_no += 1
      this.getList()
    } else {
      if (this.nomorePacket) return
      this.pageIndex += 1
      this.getPacketList()
    }
  },
  onLoad(option) {
    if(option.active){
      this.active=Number(option.active);
    }
  },
  methods: {
    app_interactive_data(option) {
      if(option.from === 'redPackets'){
        this.active = 1
      }
      this.$setNavTitle(['我的奖励', '我的红包'][this.active])
      this.page_no = 1
      this.pageIndex = 1
      this.list = []
      this.packetList = []
      this.nomore = false
      this.nomorePacket = false
      this.getList()
      this.getPacketList()
    },
    _formatDate(date, type) {
      return formatDate(date, type)
    },
    toggle(index) {
      this.active = index
      this.$setNavTitle(['我的奖励', '我的红包'][this.active])
    },
    async getList() {
      const res = await this.$api.excellentApi.circleReward({
        activityid: 2,
        page_no: this.page_no,
        page_size: 10,
        state: 0 // 失效奖励1，未失效0
      })
      if (res.code === 0) {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        this.list = this.list.concat(res.data.rewards)
        this.tabTit[0] = '我的奖励(' + res.data.total + ')'
        if (res.data.rewards.length < 10) {
          this.nomore = true
        }
      }
    },
    async getPacketList() {
      const res = await this.$api.redPacketApi.getPacketMoneyUnUse({
        pageIndex: this.pageIndex,
        pageSize: 10
      })
      if (res.code === 0) {
        this.packetList = this.packetList.concat(res.data)
        this.tabTit[1] = '我的红包(' + res.totalCount + ')'
        if (res.data.length < 10) {
          this.nomorePacket = true
        }
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
      }
    },
    showRule(item) {
      this.$set(item, 'show', !item.show)
    },
    _toGoodsDetail(item) {
      this.$sensorTrack('CLICKBUTTON', {
        button_name: 'to_use',
        page_name: 'reward',
        class_name: item.reward_type === 4 ? 'red' : 'reward',
        reward_name: item.title
      })
      if (item.reward_type === 4) {
        if (item.coupon_link_type) {
          if (item.coupon_state === 0 && item.coupon_link_type === 'IN_PAGE') {
            toGoods(item, 'navigateTo', {
              preseat: item.title,
              firstseat: '我的红包'
            })
          } else {
            if (item.coupon_link_type === 'URL') {
              // location.href = item.coupon_link
              h5NavigateTo(item.coupon_link)
              return
            }
            if (item.coupon_link_type === 'NONE') {
              return
            }
            this.$navigateTo('pagesOrder/order/index?type=1')
          }
        } else {
          return
        }
      } else {
        if (item.get_status === 2) {
          toGoods(item, 'navigateTo', {
            preseat: item.title,
            firstseat: '我的红包'
          })
        }
      }
    }
  }
}
</script>
